<div class="main-section">
    <h1 class="main-section__title">Installation</h1>

    <p class="main-section__intro">
        LumX is the first responsive front-end framework based on AngularJS & Google Material Design specifications.<br />
        It provides a full CSS Framework built with Sass and a bunch of AngularJS components.
    </p>

    <lx-component lx-title="Use LumX in your project" lx-no-demo="true">
        <p>
            LumX is available through Bower:<br />
            <code>bower install lumx</code>
        </p>

        <p>
            Don’t use bower?<br />
            You first need to download all these dependencies:
        </p>

        <ul>
            <li>AngularJS</li>
            <li>jQuery</li>
            <li>Velocity</li>
            <li>Moment.js (date picker only)</li>
            <li>Bourbon (scss only)</li>
            <li>Material Design Icons (scss only)</li>
        </ul>
    </lx-component>

    <lx-component lx-title="Include files" lx-path="/includes/getting-started/installation/include.html" lx-is-open="true" lx-no-demo="true">
        <p>
            All needed files are in the <code>dist</code> folder.<br />
            You can include LumX files and dependencies in your html template.
        </p>

        <p>
            Moreover, you can include the main sccs file in your Sass project instead of including the compiled file. In that case, you must set the include paths for Bourbon. In the case of this demo site, we use gulp-sass like this: <code>includePaths: 'libs/bourbon/app/assets/stylesheets/'</code><br />
            You'll get all all variables and mixins available: <a href="/getting-started/customization">read more</a>.
        </p>
    </lx-component>

    <lx-component lx-title="Use the AngularJS directives and services" lx-no-demo="true">
        When you have downloaded all the dependencies you need to add dependencies on the LumX AngularJS module: <code>angular.module('myModule', ['lumx']);</code>
    </lx-component>

    <lx-component lx-title="Why these dependencies?" lx-no-demo="true">
        <p>
            Our CSS framework is based on bourbon, a simple and lightweight mixin library for Sass:<br />
            <a href="http://bourbon.io" target="_blank">http://bourbon.io</a>
        </p>

        <p>
            Material Design icons are based on Austin Andrews iconic font:<br />
            <a href="http://materialdesignicons.com" target="_blank">http://materialdesignicons.com</a>
        </p>

        <p>
            Velocity is used to provide smooth animations:<br />
            <a href="http://julian.com/research/velocity" target="_blank">http://julian.com/research/velocity</a><br />
        </p>

        <p>
            Moment.js is used to manipulate dates for our date picker:<br />
            <a href="http://momentjs.com" target="_blank">http://momentjs.com</a>
        </p>
    </lx-component>
</div>
